import React, { useState } from 'react'
import styles from '../../ads/components/modal.less'
import { Input, Rate, message, Upload } from 'antd'
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
import type { UploadChangeParam } from 'antd/es/upload'
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface'
import { getBase64, beforeUpload } from '@/utils'

type Props = {
    acceptInfo: Function
}

const descs = ['1', '2', '3'];


export default function ItemDialog({ acceptInfo }: Props) {
    const [loading, setLoading] = useState(false);

    const [imageUrl, setImageUrl] = useState<string>();
    const [name, setName] = useState("")
    const [desc, setDesc] = useState("")
    const [star, setStar] = useState(0);
    const [detail, setdetail] = useState("")

    const info = {
        name,
        desc,
        star,
        detail,
        icon: imageUrl
    }

    const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj as RcFile, url => {
                setLoading(false);
                acceptInfo({
                    ...info,
                    icon: url
                })
                setImageUrl(url);
            });
        }
    };

    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );
    return (
        <div>
            <div className={[styles.flex, 'mb20'].join(" ")}>
                <span className='right'>
                    物品名称
                </span>
                <div className='ml20'>
                    <Input value={name} onChange={(ev) => {
                        acceptInfo({
                            ...info,
                            name: ev.target.value
                        })
                        setName(ev.target.value)
                    }} />
                </div>
            </div>

            <div className={[styles.flex, 'mb20'].join(" ")}>
                <span className='right'>
                    物品图标
                </span>
                <div className='ml20'>
                    <Upload
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        headers={{
                            Authorization: sessionStorage.getItem('token')
                        }}
                        action="/upload/item"
                        beforeUpload={beforeUpload}
                        onChange={handleChange}
                    >
                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                    </Upload>
                </div>
            </div>

            <div className={[styles.flex, 'mb20'].join(" ")}>
                <span className='right'>
                    星级
                </span>
                <div className='ml20'>
                    <span>
                        <Rate count={3} onChange={(star) => {
                            acceptInfo({
                                ...info,
                                star
                            })
                            setStar(star)
                        }} value={star} />
                        {star ? <span className="ant-rate-text">{descs[star - 1]}</span> : ''}
                    </span>
                </div>
            </div>

            <div className={[styles.flex, 'mb20'].join(" ")}>
                <span className='right'>
                    物品简介
                </span>
                <div className='ml20'>
                    <Input value={desc} onChange={(ev) => {
                        acceptInfo({
                            ...info,
                            desc: ev.target.value
                        })
                        setDesc(ev.target.value)
                    }} />
                </div>
            </div>

            <div className={[styles.flex, 'mb20'].join(" ")}>
                <span className='right'>
                    物品详情
                </span>
                <div className='ml20'>
                    <Input value={detail} onChange={(ev) => {
                        acceptInfo({
                            ...info,
                            detail: ev.target.value
                        })
                        setdetail(ev.target.value)
                    }} />
                </div>
            </div>


        </div>
    )
}